import React from 'react'
import PropTypes from 'prop-types'
import { Table, Modal } from 'antd'
import styles from './List.less'
import classnames from 'classnames'
import AnimTableBody from '../../components/DataTable/AnimTableBody'
import { DropOption } from 'components'
import { Link } from 'dva/router'

const confirm = Modal.confirm

const List = ({ onDeleteItem, onEditItem, isMotion, location, ...tableProps }) => {
  const handleMenuClick = (record, e) => {
    if (e.key === '1') {
      onEditItem(record)
    } else if (e.key === '2') {
      confirm({
        title: '确定删除该服务机?',
        onOk () {
          onDeleteItem(record.pk)
        },
      })
    }
  }

  const columns = [
    {
      title: '服务机ID',
      dataIndex: 'pk',
      key: 'pk',
      width: 80,
      // render: (text, record) => <Link to={`user/${record.id}`}>{text}</Link>,
    },{
      title: '服务机IP',
      dataIndex: 'fields.ip',
      key: 'name',
      className:'nameCol',
      // width: 64,
      // className: styles.avatar,
      render: (text,record) => record.fields.ip,
    },{
      title: '用户名',
      dataIndex: 'fields.user',
      key: 'user',
      render: (text,record) => record.fields.user,
    },{
      title: '密码',
      dataIndex: 'fields.password',
      key: 'password',
      render: (text,record) => record.fields.password,
    },{
      title: '状态',
      dataIndex: 'fields.status',
      key: 'status',
      // className:'nameCol',
      // width: 64,
      // className: styles.avatar,
      render: (text,record) => record.fields.status==='0'?'空闲':'锁定',
    },{
      title: '使用者',
      dataIndex: 'fields.use_by',
      key: 'use_by',
      render: (text,record) => record.fields.use_by,
    }, {
      title: '服务机系统',
      dataIndex: 'fields.os_type',
      key: 'os_type',
      render: (text,record) => {
        switch(record.fields.os_type){
          case '0':
            return 'Linux';
            break;
          case '1':
            return 'Windows';
            break;
          case '2':
            return 'Docker';
            break;
        }
      },
    }, {
      title: '操作',
      key: 'operation',
      width: 100,
      render: (text, record) => {
        return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={record.fields.status==='0'?[{ key: '1', name: '修改' }, { key: '2', name: '删除' }]:[{ key: '1', name: '修改' }]} />
      },
    },
  ]

  const getBodyWrapperProps = {
    page: location.query.page,
    current: tableProps.pagination.current,
  }

  const getBodyWrapper = body => { return isMotion ? <AnimTableBody {...getBodyWrapperProps} body={body} /> : body }

  return (
    <div>
      <Table
        {...tableProps}
        className={classnames({ [styles.table]: true, [styles.motion]: isMotion })}
        bordered
        columns={columns}
        simple
        rowKey={record => record.pk}
        getBodyWrapper={getBodyWrapper}
        rowSelection={null}
      />
    </div>
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  isMotion: PropTypes.bool,
  location: PropTypes.object,
}

export default List
